<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('货区设置')"/>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            仓库：
                            <select name="wareId">
                                <option value="">全部</option>
                                <option v-for="(item, index) in wares" :key="index" :value="item.wareId" v-cloak>
                                    {{item.wareName}}
                                </option>
                            </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="system:areaInfo:add">
                <i class="fa fa-plus"></i> 添加
            </a>
            <a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()"
               shiro:hasPermission="system:areaInfo:edit">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger btn-del disabled" onclick="$.operate.removeAll()"
               shiro:hasPermission="system:areaInfo:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-info btn-lg " onclick="bit()"><!--shiro:hasPermission="basics:purchase:bit"-->
                <i class="fa fa-500px"></i> 生成二维码
            </a>
            <!--				<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:areaInfo:export">-->
            <!--					<i class="fa fa-download"></i> 导出-->
            <!--			 	</a>-->
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true" style="white-space: nowrap"></table>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:areaInfo:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:areaInfo:remove')}]];
    var prefix = ctx + "system/areaInfo";
    var sleep = function(time) {
        var startTime = new Date().getTime() + parseInt(time, 10);
        while(new Date().getTime() < startTime) {}
    };
    function bit() {


        var rows = $.common.isEmpty($.table._option.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns($.table._option.uniqueId);

        var split = rows.toString().split(",");

        if (split == '') {
            $.modal.alert("请选择数据")
        } else {
            for (var i = 0; i < split.length; i++) {
                window.location.href = "http://localhost:8000/system/areaInfo/qr?ids=" + split[i] + ""
                sleep(1500)

            }
        }


    }

    $(function () {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "货区",
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'areaId',
                    title: '货区ID',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'areaCode',
                    title: '货区编码',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'areaName',
                    title: '货区名称',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'createTime',
                    title: '添加时间',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'memo',
                    title: '备注',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'wareName',
                    title: '仓库',
                    align: 'center',
                    visible: true
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.areaId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.areaId + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    });

    var app = new Vue({
        el: '.container-div',
        data: {
            wares: []
        },
        methods: {
            getWares: function () {
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/system/wareInfo/list",
                    data: {},
                    async: false,
                    error: function (request) {
                        $.modal.alertError("系统错误");
                    },
                    success: function (data) {
                        that.wares = data.rows;
                    }
                });
            }
        },
        created() {
            this.getWares();
        }
    })
</script>
</body>
</html>